<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
		<style type="text/css">
			/*body{
	    		background:white;
	    	}*/
	    	h4{
	    		font-weight:normal;
	    	}
	    	.mui-input-group:before,.mui-input-group:after,.mui-table-view:after{
	    		height: 0;
	    	}
	    	.mui-icon .mui-badge{
	    		    line-height: 1;
	    		    top: 2px;
    				left: 70%;
	    	}
	    	.mui-table-view{
	    		margin-top: 20px;
	    	}
	    	.mui-table-view-cell:after{
	    		right: 15px;
	    	}
		</style>
	</head>

	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<div class="mui-content" >
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media">
			        <a id="inform">
			            <img class="mui-media-object mui-pull-left" src="img/default_user.jpeg">
			            <span class="mui-icon mui-icon-plusempty mui-pull-right"></span>
			            <div class="mui-media-body">
			               	<h4>海绵宝宝</h4>
			                <p class="mui-ellipsis">个性签名：I know nothing except the fact of my ignorance</p>
			            </div>
			        </a>
			    </li>
			</ul>
			<ul class="mui-table-view mui-grid-view mui-grid-9" style="background: white;">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
			    <a href="#" id="collection">
			        <span class="mui-icon mui-icon-star"></span>
			        <div class="mui-media-body">收藏</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
			    <a href="#" id="gallery">
			        <span class="mui-icon mui-icon-image"><span class="mui-badge mui-badge-red">5</span></span>
			        <div class="mui-media-body">相册</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
			    <a href="#" id="history">
			        <span class="mui-icon mui-icon-chatbubble"></span>
			        <div class="mui-media-body">足迹</div>
			    </a>
			</li>
			
			</ul>
			
			<ul class="mui-table-view">
			        <li class="mui-table-view-cell">
			            <a id="setting">
			                <span class="mui-icon mui-icon-settings"></span>
			                <span>设置</span>
			            </a>
			        </li>
			        <li class="mui-table-view-cell" >
			            <a id="help">
			                <span class="mui-icon mui-icon-help"></span>
			                <span>帮助与反馈</span>
			            </a>
			        </li>
			        <li class="mui-table-view-cell" >
			        	<a id="about">
			        		<span class="mui-icon-extra mui-icon-extra-custom"></span>
			            	<span>关于我们</span>
			        	</a>
		   	        </li>
			    </ul>
			    <ul class="mui-table-view">
		            <li class="mui-table-view-cell">
		                <a >
		                    	切换账号
		                </a>
		            </li>
		            <li class="mui-table-view-cell">
		                <a >
		                     	退出
		                </a>
		            </li>
		        </ul>
		</div>
	</body>
	<script type="text/javascript">
		mui("li").on("tap","#inform",function(){
			mui.openWindow({
				url:"inform.html",
				id:"inform"
			});
		});
		
		mui("li").on("tap","#gallery",function(){
			mui.openWindow({
				url:"gallery.html",
				id:"gallery"
			});
		});
		mui("li").on("tap","#setting",function(){
			mui.openWindow({
				url:"setting.html",
				id:"setting"
			});
		});
		mui("li").on("tap","#help",function(){
			mui.openWindow({
				url:"help.html",
				id:"help"
			});
		});
	</script>
</html>